<template>
	<view>
		<!--顶部S-->
		<view class="top-box tp-ptb0lr30 tp-bbox  center_combo tp-h88">
			<view class="tp-w690">
				<uni-search-bar radius="100" placeholder="请输入关键字" bgColor="#fff" @cancel="search" @clear="search" @confirm="search" />
			</view>
		</view>
		<!--顶部E-->

		<view class="history_title_box level_align flex_between tp-h88 tp-mt80" v-if="cityHistoryList.length">
			<view class="">
				历史记录
			</view>
			<view class="level_align">
				<view class=" tp-mr20">
					<image class="tp-img28" src="../static/icon/delete.png" mode=""></image>
				</view>
				<view class="" @click="delAll">
					清除历史
				</view>
			</view>
		</view>
		<view class="history_list flex flex_wrap" style="padding-right: 10rpx;">
			<view class="tag tp-bgf tp-mb20 tp-mr20 tp-br8" @click="search({value: item})" v-for="(item,index) in cityHistoryList"
			 :key="index">
				<view class="level_align">
					<view class="">
						{{item}}
					</view>
					<view class="close-icon level_align" @click="delOne(index)">
						<uni-icons type="closeempty" size="22" color="#999"></uni-icons>
					</view>
				</view>

			</view>
		</view>
		<view class="tp-h88" v-if="!cityHistoryList.length"></view>
		<view class="tp-fz26 tp-fc66 tp-w690 tp-mt20">
			当前城市
		</view>
		<view @click="selectAdders(atCity)" class="tp-ptb0lr30 tp-h64  tp-br8 tp-bgf tp-mt20" style="display: inline-block;line-height: 64rpx;margin-left: 30rpx;">
			{{atCity}}
		</view>
		<view class="tp-fz26 tp-fc66 tp-w690 tp-mt20">
			热门城市
		</view>
		<view class="history_list flex flex_wrap tp-mt20" style="padding-right: 10rpx;">
			<view class="tag tp-bgf tp-mb20 tp-mr20 tp-br8"  @click="selectAdders(item)" v-for="(item,index) in tuijianList"
			 :key="index">
				<view class="level_align">
					<view class="">
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<!-- 索引 -->
		<view class="tp-mt20">
			<view class="" v-for="(item,index) in list" :key="index">
				<view class="tp-h88 tp-ptb0lr30 tp-lh88 tp-fc333 tp-fz36">
					{{item.value}}
				</view>
				<view @click="selectAdders(it_m.value)" v-for="(it_m,ind) in item.children" :key="ind" class="tp-bgf tp-ptb0lr30 tp-lh88 tp-h88 tp-fc333 tp-fz30 tp-mb2">
					{{it_m.value}}
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	var QQMapWX = require('@/utils/qqmap-wx-jssdk/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	export default {
		data() {
			return {
				searchVal: '', // 搜索的内容
				atCity: '郑州', // 当前城市
				location: { //经纬度
					longitude: '',
					latitude: ''
				},
				locationAddress: '', //详细地址
				cityHistoryList: [], // 搜索历史
				tuijianList: [], // 推荐热门城市
				list: [],// 地址列表
				type: '', // 是否是定制过来的  没有 正常切换城市  有 定制选择城市  go出发地  back 目的地
			}
		},
		onLoad(opt) {
			if(opt.type){
				this.type = opt.type
			}
			this.getCityList()
			this.initMap()
		},
		onShow() {
			if(uni.getStorageSync('cityHistoryList')){
				this.cityHistoryList  = uni.getStorageSync('cityHistoryList');
			}
		},
		methods: {
			// 获取城市列表
			getCityList() {
				this.$http.get(this.$api.citySearchIndex + '?keyWords=' + this.searchVal).then(res => {
					if (res.code === 200) {
						this.list = res.data.cityMap
						this.tuijianList = res.data.tuijianList
					}
				})
			},
			initMap() {
				qqmapsdk = new QQMapWX({
					key: 'C7JBZ-VQD6D-BVZ4C-PHTJO-HNPSF-ORFT5'
				});
				this.getLocation()
			},
			// 定位
			getLocation() {
				console.log("定位中...");
				uni.showLoading({
					title: '获取定位信息中'
				});
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					success: async function(res) {
						uni.hideLoading()
						console.log('定位数据...');
						let {
							latitude,
							longitude
						} = res
						// #ifdef MP-WEIXIN
						_this.reverseGeocoder(latitude, longitude)
						// #endif

						// #ifdef H5
						let data = await _this.exchangeDingwei(latitude, longitude)
						_this.atCity = data.result.ad_info.city
						// #endif
					},
					complete(){
						uni.hideLoading()
					}
				});
			},
			// 地址逆解析
			reverseGeocoder(latitude, longitude) {
				let _this = this
				qqmapsdk.reverseGeocoder({
					location: {
						latitude,
						longitude
					},
					success: function(res) {
						_this.atCity = res.result.ad_info.city
					},
				});
			},
			// 搜索
			search(e) {
				console.log(e);
				this.searchVal = e.value.trim()
				this.getCityList()
				if(!this.searchVal) return
				if (this.cityHistoryList.indexOf(e.value) == -1) {
					this.cityHistoryList.unshift(e.value)
				}
				if(this.cityHistoryList.length > 10){
					this.cityHistoryList.pop()
				}
				uni.setStorageSync('cityHistoryList', this.cityHistoryList)

			},
			// 选择地址
			selectAdders(val) {
				if(this.type){  // 定制选择城市
					let arr =  this.$store.getters.getChoosedMakeCity && this.$store.getters.getChoosedMakeCity.backCity || []
					if (this.type == 'go') {
						this.$store.commit('upChoosedMakeCity', {
							goCity: val,
						});
					} else if (this.type == 'back') {
						arr.push(val)
						this.$store.commit('upChoosedMakeCity', {
							backCity: arr,
						});
					}
					// this.$store.commit('upChangeNowCity', val)
				}else {
					this.$store.commit('upChangeNowCity', val)
				}
				uni.navigateBack({
					delta: 1
				})
			},
			// 删除单个记录
			delOne(index) {
				this.cityHistoryList.splice(index, 1)
				uni.setStorageSync('cityHistoryList', this.cityHistoryList)
			},
			// 删除全部
			delAll() {
				this.cityHistoryList = []
				uni.removeStorageSync('cityHistoryList');
			},

		}
	}
</script>

<style lang="scss" scoped>
	.top-box {
		background: #00B4FF;
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: 0;
		/* #endif */
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		right: 0;
		z-index: 10000;
		width: 100%;

		/deep/ .uni-searchbar {
			height: 56rpx;
		}

		/deep/ .uni-searchbar__cancel {
			line-height: 56rpx;
		}

		/deep/ .uni-searchbar__cancel {
			color: #fff;
		}

	}


	.history_title_box {
		padding: 0 30rpx;
		font-size: 26rpx;
	}

	.history_list {
		padding: 0 40rpx;

		.tag {
			height: 60rpx;
			line-height: 60rpx;
			padding: 0 20rpx;
			font-size: 28rpx;
			border: 0;
			display: inline-block;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);

			.close-icon {
				margin-left: 20rpx;
			}
		}
	}
</style>
